<script setup lang="ts">
import {defineProps} from 'vue'
import type{ CSSProperties } from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";
import { useRouter } from 'vue-router'
const router = useRouter()
const  {top,right,width,height} = defineProps<{top: string,right:string,width:string,height:string}>()
const logoutStyle: CSSProperties = {
  top: top,
  right: right,
  width: width,
  height: height,
};
const onOut = () => {
  ElMessageBox.confirm('确定退出登录吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    localStorage.removeItem('token')
    localStorage.removeItem('type')
    router.replace('/login')
  }).catch(() => {
    ElMessage.info('已取消')
  })
}
</script>

<template>
  <div class="logout" :style="logoutStyle" @click="onOut">
    <img class="logoutImg" src="@/assets/logout.png" alt="退出"/>
  </div>
</template>

<style scoped lang="less">
.logout{
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 999;
  .logoutImg{
    width: 100%;
    height: 100%;
  }
}
</style>